@import '../../mixins'

.Notifications
  box(absolute, flex)
  pos(b: 0, l: 0)
  size(100%, 0)
  flex-direction: column
  justify-content: flex-end
  z-index: 2001

.Notifications .notification
  box(relative, flex)
  flex-direction: column
  flex-shrink: 0
  margin: 8px
  padding: 4px 0 0
  background-color: var(--ctx-menu-bg)
  border-radius: 3px
  overflow: hidden
  box-shadow: 0 0 0 1px var(--border-active-fg),
              0 0 16px 0 #00000032

  &:after
    content: ''
    box(absolute)
    size(5px, 5px)
    pos(3px, r: 3px)
    background-color: var(--notice-fg)
    border-radius: 3px

  &:hover:before
    opacity: .1
  
  &:active:before
    transition: none
    opacity: 0

  &[data-timeout]:after
    animation: notif-timeout var(--timeout) linear

  &[data-lvl="err"]:after
    background-color: var(--false-fg)

  &[data-lvl="progress"]
    cursor: progress

  &[data-lvl="progress"]:after
    animation: notif-progress 2s linear infinite

.Notifications .title
  box(relative)
  size(100%)
  text(s: rem(17), w: 700)
  color: var(--title-fg)
  padding: 4px 12px 9px
.Notifications .notification[data-lvl="err"] .title
  color: var(--false-fg)

.Notifications .msg
  box(relative)
  size(100%)
  text(s: rem(12))
  color: var(--info-fg)
  padding: 0 12px 10px

.Notifications .progress
  box(relative, flex)
  justify-content: center
  align-items: center

.Notifications .progress-bar
  box(relative)
  size(calc(100% - 24px), 5px)
  border-radius: 3px
  margin: 0 0 10px
  box-shadow: inset 0 0 0 1px var(--border-active-fg)
  overflow: hidden

.Notifications .progress-bar-value
  box(absolute)
  size(100%, same)
  pos(0, -100%)
  background-color: var(--notice-fg)

.Notifications .ctrls
  box(relative, flex)
  box-shadow: 0 -1px 0 0 var(--border-active-fg)

.Notifications .ctrl
  box(relative)
  text(s: rem(14))
  flex-grow: 1
  padding: 5px 8px
  text-align: center
  color: var(--info-fg)
  cursor: pointer
  &:not(:last-of-type)
    margin-right: 1px
    box-shadow: 1px 0 0 0 var(--border-active-fg)
  &:before
    content: ''
    box(absolute)
    pos(0, 0)
    size(100%, same)
    background-color: #565656
    opacity: 0
    transition: opacity var(--d-fast)

  &:hover:before
    opacity: .1
  
  &:active:before
    transition: none
    opacity: 0

.notification-enter-active
.notification-leave-active
  transition: transform var(--d-fast), opacity var(--d-fast)
.notification-leave-active
  box(absolute)
.notification-move
  transition: transform var(--d-fast), opacity var(--d-fast)
.notification-enter
  opacity: 0
  transform: translateY(100%)
.notification-enter-to
  opacity: 1
  transform: translateY(0)
.notification-leave
  opacity: 0
  transform: translateY(0)
.notification-leave-to
  opacity: 0
  transform: translateY(100%)

@keyframes notif-timeout
  0%
    opacity: 1
  90%
    opacity: 0
  100%
    opacity: 0

@keyframes notif-progress
  0%
    opacity: 1
  50%
    opacity: .5
  100%
    opacity: 1